import React, { useEffect, useState } from 'react';
import { Table, Button, DatePicker, notification, Input, Modal, Card, Form, Select } from 'antd'
import { useNavigate } from 'react-router-dom';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { checkin_list, checkin_del, checkin_search, checkin_update } from '../../../../api/checkApi/api';
import './CheckinM.scss'
import ExportJsonExcel from 'js-export-excel';

function CheckinM(props) {
  const { Search } = Input
  const [form] = Form.useForm()
  var [checkList, setCheck] = useState([])
  var [searchList, setSearch] = useState([])
  var navigate = useNavigate()
  useEffect(() => {
    checkin_list().then((res) => {
      console.log(res.data);
      setCheck(res.data)
    })
  }, [])
  var routerAdd = () => {
    navigate('/index/checknav/addcheck')
  }
  // 删除考勤信息
  var del = (record) => {
    checkin_del(record.id).then((res) => {
      console.log(res.data);
      notification.success({ message: '删除考勤信息成功' })
      checkin_list().then((res) => {
        console.log(res.data);
        setCheck(res.data)
      })

    })
  }
  // 搜索考勤信息
  var onSearch = (val) => {
    if (val == '') {
      notification.info({ message: '搜索信息不能为空' })
    } else {
      checkin_search({name:val}).then((res) => {
        console.log(res.data);
        setSearch(res.data)
      })
    }

  }
  //编辑考勤信息
  const { Option } = Select;
  var ngvigate = useNavigate()
  const config = {
    rules: [
      {
        type: 'object',
        required: true,
        message: 'Please select time!',
      },
    ],
  };
  var [time, setTime] = useState([])
  var change = (value) => {
    console.log(value);
    setTime(value)
  }
  var [time2, setTime2] = useState({})
  var change2 = (value) => {
    console.log(value);
    setTime2(value)
  }
  const [isModalOpen, setIsModalOpen] = useState(false);
  var onFinish = (values) => {
    console.log(values);
    checkin_update({ id: value.id, name: values.name, num: values.num, type: values.type, people: values.people, time: time.$y + '-' + (time.$M + 1) + '-' + time.$D, updatetime: time2.$y + '-' + (time2.$M + 1) + '-' + time2.$D + ' ' + time2.$H + ' : ' + time2.$m }).then((res) => {
      console.log(res.data);
      notification.success({ message: '修改考勤信息成功' })
    })
    checkin_list().then((res) => {
      console.log(res.data);
      setCheck(res.data)
    })

  }
  const showModal = () => {
    form.resetFields();
    setIsModalOpen(true);
  };
  var [value, setValue] = useState({})
  var edit = (record) => {
    console.log(record);
    setValue(record)
    showModal()
  }
  const handleOk = () => {
    setIsModalOpen(false);
    form.submit();
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalOpen(false);

  };
  const onGenderChange = (value) => {
    console.log(value);

  };

  // 导出数据的方法
  var downloadFileToExcel = () => {
    const datas = checkList ? checkList : '';//表格数据
    var option = {};
    let dataTable = [];
    if (datas) {
      datas.map((item) => {
        let obj = {
          name: item.name,
          num: item.num,
          type: item.type,
          time: item.time,
          updatetime: item.updatetime,
          people: item.people
        }
        dataTable.push(obj);
        return dataTable
      })

    }
    option.fileName = '考勤表信息'
    option.datas = [
      {
        sheetData: dataTable,
        sheetName: 'sheet',
        sheetFilter: ['name', 'num', 'type', 'time', 'updatetime', 'people'],
        sheetHeader: ['考勤组名称', '考勤组人数', '考勤组类型', '时间', '更新时间', '负责人'],
      }
    ];
    var toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }
  //决定了每一列渲染什么数据
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`
    },
    {
      title: '考勤组名称',//表格列的名字(显示在表格头上)
      key: 'name',
      dataIndex: 'name',//数据对应的属性名

    },
    {
      title: '考勤组人数',
      dataIndex: 'num',
      key: 'num',

    },
    {
      title: '考勤组类型',
      dataIndex: 'type',
      key: 'type',

    },
    {
      title: '考勤组时间',
      dataIndex: 'time',
      key: 'time',

    },
    {
      title: '更新时间',
      dataIndex: 'updatetime',
      key: 'updatetime',

    },
    {
      title: '负责人',
      dataIndex: 'people',
      key: 'people',

    },
    {
      title: '操作',
      key: 'action',
      render: (_, record, key) => (
        <>
          <FormOutlined className='edit' onClick={() => { edit(record) }} />
          <DeleteOutlined className='del' onClick={() => { del(record) }} />
        </>
      )
    }
  ]



  checkList = searchList.length == 0 ? checkList : searchList
  return (
    <div className='checkin'>

      {/* <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
                <Breadcrumb.Item>账号管理</Breadcrumb.Item>
                <Breadcrumb.Item>管理员列表</Breadcrumb.Item>
            </Breadcrumb> */}
      <Card title="考勤组管理" bordered={false} >
        {/* 表格组件 */}
        {/* columns 表格每一列如何渲染 */}
        {/* dataSource 表格的数据源 */}
        <div className='button'>
          <Search style={{ width: 300, marginRight: 20, marginLeft: 20 }} placeholder="输入分组名称" enterButton onSearch={onSearch} />
          <Button type="primary" onClick={routerAdd}>新增考勤组 +</Button>
          <Button type='primary' onClick={downloadFileToExcel}>导出</Button>
        </div>
        <Modal title="修改考勤组" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true}>
          <Form
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            onFinish={onFinish}
            // 绑定form实例
            form={form}
          >
            <Form.Item
              label="考勤组名称"
              name="name"
              rules={[{ required: true, message: '输入考勤组名称' }]}
              initialValue={value.name}
            
            >
              <Input placeholder='输入考勤组名称'  />
            </Form.Item>
            <Form.Item
              label="考勤组人数"
              name="num"
              rules={[{ required: true, message: '输入人数' }]}
              initialValue={value.num}
            >
              <Input type='number' placeholder='输入人数' />
            </Form.Item>
            <Form.Item
              label="考勤组类型"
              name="type"
              rules={[{ required: true, message: '' }]}
              initialValue={value.type}
            >
              <Select
                placeholder="Select a option"
                allowClear
                onChange={onGenderChange}
              >
                <Option value="固定班制">固定班制</Option>
                <Option value="排班制">排班制</Option>
                <Option value="自由班制">自由班制</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="负责人"
              name="people"
              rules={[{ required: true, message: '输入负责人名称' }]}
              initialValue={value.people}
            >
              <Input placeholder='输入负责人名称' />
            </Form.Item>
            <Form.Item name="time" label="修改班次时间" {...config} defaultPickerValue={value.time}>
              <DatePicker onChange={change} />
            </Form.Item>
            <Form.Item name="updatetime" label="修改更新时间" {...config}>
              <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={change2} />
            </Form.Item>
          </Form>
        </Modal>
        <Table columns={columns} dataSource={checkList} />
      </Card>
    </div>
  );
}

export default CheckinM;